<template>
  <div class="home">
    <HelloWorld msg="Welcome to Your Vue.js App" />

    <div>
      <input style="width: 300px" type="text" v-model="text" />
      <button @click="handleUpdate">Update</button>
    </div>
    <p>text: {{text}}</p>

    <hr />
    <p>{{settings}}</p>
    <p>
      <button @click="handleToggle">Toggle flag</button>
      <button ref="versionBtn" @click="handleVersionPlus">version++</button>
    </p>

    <hr>
    {{moduleA}}
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import { mapState } from "vuex";

export default {
  name: "Home",
  components: {
    HelloWorld
  },
  computed: {
    ...mapState({
      settings: state => state.settings
    }),
    text: {
      get() {
        return this.$store.state.text;
      },
      set(value) {
        this.$store.commit("updateText", value);
      }
    },
    moduleA() {
      return this.$store.state.a
    },
  },
  methods: {
    handleUpdate() {
      let text = this.text;
      text += " update";

      this.$store.commit("updateText", text);
      // console.log(this.text)
    },
    handleToggle() {
      this.$store.commit("toggleFlag");
    },
    handleVersionPlus() {
      // this.$store.commit('updateVersion')
      const btn = this.$refs.versionBtn;
      const innerText = btn.innerText;
      btn.disabled = true;
      btn.innerText = "waiting...";
      this.$store.dispatch("updateVersionAsync").then(() => {
        btn.disabled = false;
        btn.innerText = innerText;
      });
    }
  }
};
</script>
